<template>
    <div class="content">
        <div class="warp">
            <div class="top">
                <div class="top-content">
                    <div
                        style="border: 1px solid #EBEEF5;padding: 5px;display: inline-block;box-sizing: border-box;width: 150px;height: 150px;">
                        <el-avatar icon="el-icon-user-solid" shape="square" :size="140" :src="communityDetail.pic"
                            fit="fill"></el-avatar>
                    </div>

                    <div class="community-info">
                        <div class="community-info-content">
                            <div style="margin-bottom: 10px;">
                                <span style="font-size: 22px;color:#333;vertical-align: middle">
                                    {{ communityDetail.name }}社区
                                </span>
                                <span
                                    style="display: inline-block;text-align: center;vertical-align: middle;width: 125px;">
                                    <el-button v-show="!isJoined" size="mini" type="danger" icon="el-icon-plus"
                                        @click="joinClick($event)">关注</el-button>
                                    <el-button v-show="isJoined" size="mini" plain icon="el-icon-check"
                                        @click="cancelClick($event)">已关注&ensp;|&ensp;取消</el-button>
                                </span>
                                <span style="font-size:12px;color: #AAA;margin-left: 20px;margin-right:5px">
                                    关注:
                                </span>
                                <span style="font-size: 12px;color:#FF7F3E">{{ communityDetail.joinNum }}</span>
                                <span style="font-size:12px;color: #AAA;margin-left: 20px;margin-right:5px">
                                    帖子:
                                </span>
                                <span style="font-size: 12px;color:#FF7F3E">{{ communityDetail.postNum }}</span>
                            </div>
                            <span style="font-size: 14px;color: #4c4c4c;">
                                {{ communityDetail.remark }}
                            </span>
                        </div>

                    </div>
                </div>

            </div>
            <div class="main-warp">

                <el-container>



                    <el-main class="list-container">
                        <!-- Main content -->
                        <el-menu style="margin-bottom: 20px;" default-active="-1" mode="horizontal"
                            @select="sectionSelect">
                            <el-menu-item index="-1">默认</el-menu-item>
                            <el-menu-item index="-2">精华</el-menu-item>
                            <el-submenu v-if="sectionList.length > 0" index="0">
                                <template slot="title">板块</template>
                                <el-menu-item v-for="item in sectionList" :index="item.id + ''" :key="item.id">{{
                                    item.name }}</el-menu-item>
                            </el-submenu>

                        </el-menu>
                        <div style="flex: 1">
                            <el-empty v-if="postList.length ==0" description="暂无数据"></el-empty>
                            <post-list-card :communityId="communityDetail.id" v-for="post in postList" :key="post.id"
                                :postInfo="post"></post-list-card>
                        </div>
                        <el-pagination @size-change="getPostList" @current-change="getPostList"
                            :current-page.sync="params.pageNum" :page-sizes="[20, 40, 80, 100]"
                            :page-size.sync="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total" :pager-count="7">
                        </el-pagination>


                    </el-main>
                    <el-aside class="community-aside" width="300px" style="border-left: 1px solid #e4e6eb;">
                        <!-- Aside content -->
                        <div class="side-item" style="padding:20px 0px 20px 20px;border-bottom: 1px solid #e4e6eb;">
                            <span class="aside-lable">成员信息</span>
                            <div class="member-info" v-if="isJoined" style="margin-top: 10px;display: flex;">
                                <div style="display:inline-block">
                                    <el-avatar icon="el-icon-user-solid" :size="100" shape="square"
                                        :src="myMemberInfo.userInfo.avatar" fit="fill"></el-avatar>
                                </div>
                                <div style="display: inline-block;flex:1;margin-left: 15px;">
                                    <span style="display: block;margin-bottom: 5px;"><i
                                            class="el-icon-user"></i>&ensp;{{
                                                myMemberInfo.userInfo.nickName ?? myMemberInfo.userInfo.userName }}</span>
                                    <span style="display:block"><i class="el-icon-coin"></i>&ensp;{{
                                        myMemberInfo.userInfo.integral ?? 0
                                        }}</span>
                                    <span style="display:block"><i class="el-icon-medal"></i>&ensp;LV&nbsp;{{
                                        myMemberInfo.levelInfo.level
                                        ?? 0 }}</span>
                                    <div style="width:90%">
                                        <span style="font-size: 12px;display: block;margin:5px 0px">经验值：</span>
                                        <el-progress :text-inside="true" :stroke-width="20" :percentage="ExpPercentage"
                                            :format="expFormat"></el-progress>
                                    </div>
                                </div>

                            </div>
                            <div v-else
                                style="display:flex;flex-direction: column;align-items:center;justify-content:center;height: 80px;">
                                <span style="color: #AAA;">请先关注社区</span>
                            </div>
                        </div>
                        <div class="side-item">
                            <span class="aside-lable">社区签到</span>
                            <div v-if="isJoined" style="margin-top: 20px;display: flex;justify-content: center;flex-direction: column;align-items: center;">
                                <el-button v-if="!isSigned" type="primary" size="default" @click="signClick">签到</el-button>
                                <el-tag v-else size="normal"  effect="plain">已连续签到{{ dur }}天</el-tag>
                                
                                
                            </div>
                            <div v-else
                                style="display:flex;flex-direction: column;align-items:center;justify-content:center;height: 80px;">
                                <span style="color: #AAA;">请先关注社区</span>
                            </div>
                        </div>
                        <div class="side-item" style="padding:20px 20px 20px 20px;border-bottom: 1px solid #e4e6eb;">
                            <span class="aside-lable">社区操作</span>
                            <div v-if="isJoined" style="margin-top: 20px;display: flex;justify-content: space-around;">
                                <el-button type="primary" size="small" plain
                                    @click="$router.push({ path: '/post/edit', query: { communityId: communityDetail.id } })">发布帖子</el-button>
                                <el-button v-show="myMemberInfo.isAdmin" type="primary" size="small"
                                    plain>管理社区</el-button>
                            </div>
                            <div v-else
                                style="display:flex;flex-direction: column;align-items:center;justify-content:center;height: 80px;">
                                <span style="color: #AAA;">请先关注社区</span>
                            </div>
                        </div>
                        

                    </el-aside>



                </el-container>
            </div>

        </div>
    </div>
</template>

<script>
import * as API from "@/api/community/community"
import * as PostAPI from "@/api/post/post"
import { isJoined } from "@/api/community/community";
import * as SignAPI from "@/api/sign/sign"
import router from "@/router";
import PostListCard from "@/components/PostListCard"
import * as SectionAPI from '@/api/section/section';
export default {
    components: {
        PostListCard,
    },
    data() {
        return {
            postList: [],
            params: {
                pageNum: 1,
                pageSize: 20,
                sectionId: undefined,
                isTop: undefined,
                isEssence: undefined,
                communityId: this.$route.query.id
            },
            communityDetail: {
                id: null
            },
            sectionList: [],
            isJoined: false,
            isSigned:false,
            dur:0,
            myMemberInfo: {
                levelInfo: {},
                isAdmin: null,
                userInfo: {}
            },
            total: 0
        }
    },
    methods: {
        getCommunityDetail() {
            API.getCommunityById(this.$route.query.id).then(res => {
                this.communityDetail = res.data;
            })
        },
        getIsJoined() {
            API.isJoined(this.$route.query.id).then((res) => {
                this.isJoined = res.data.isJoined;
                this.myMemberInfo.levelInfo = res.data.levelInfo ?? {};
                this.myMemberInfo.isAdmin = res.data.isAdmin;
                this.myMemberInfo.userInfo = res.data.userInfo??JSON.parse(localStorage.getItem("userInfo"));

            })
        },
        joinClick(e) {
            API.join(this.communityDetail.id).then(() => {
                this.isJoined = true;
                this.getIsJoined();

            });
        },
        cancelClick(e) {
            API.cancelJoin(this.communityDetail.id).then(() => {
                this.isJoined = false;
            })
        },
        // loginClick(){
        //     localStorage.setItem("logUrl",this.$router.currentRoute.fullPath)
        //     this.$router.push('/login')
        // },
        expFormat(percentage) {
            return `${this.myMemberInfo.levelInfo.currExp ?? 0}/${this.myMemberInfo.levelInfo.maxExp ?? '-'}`
        },
        getPostList() {
            PostAPI.getPostPageList(this.params).then(res => {
                this.postList = res.data.rows;
                this.total = res.data.count;
            })
        },
        getSectionList() {
            SectionAPI.getSectionList(this.communityDetail.id).then(res => {
                this.sectionList = res.data;
            })
        },
        sectionSelect(index) {
            console.log(index)
            if (index > 0) {
                this.params.sectionId = index;

            } else if (index == -2) {
                this.params.sectionId = null
                this.params.isEssence = 1;
            } else if (index == -1) {
                this.params.sectionId = null;
                this.params.isEssence = null;
                this.params.sectionId = null;
            }
            this.getPostList();
        },
        getIsSgined(communityId){
            SignAPI.isSigned({communityId}).then(res=>{
                this.isSigned = res.data.isSigned;
                this.dur = res.data.dur;
                // console.log(res.data)
            });
        },
        signClick(){
            SignAPI.sginIn({communityId:this.communityDetail.id}).then(res=>{
                this.isSigned = true;
                this.dur = res.data.duration;
                this.getIsJoined();
            })
        }

    },
    computed: {
        ExpPercentage() {
            if (!this.myMemberInfo.levelInfo.maxExp) {
                return 100;
            }
            return this.myMemberInfo.levelInfo.currExp / this.myMemberInfo.levelInfo.maxExp * 100;
        }
    },
    mounted() {
        let communityId = this.$route.query.id;
        this.communityDetail.id = this.$route.query.id;
        this.params.communityId = this.communityDetail.id;
        this.getCommunityDetail();
        this.getIsJoined();
        this.getPostList();
        this.getSectionList();
        this.getIsSgined(communityId);

    },
}
</script>

<style lang="scss" scoped>
.content {
    width: 1146px;
    margin: auto;
    // background-color: pink;
    position: relative;
    display: flex; //必要的，否则会导致.warp元素margin-top失效
    flex-direction: column;
}

.warp {
    margin-top: 20px;
    min-height: calc(100vh - 91px);

}

.top {
    height: 200px;
    background-color: white;
    border: 1px solid #DCDFE6;

    .top-content {
        position: relative;
        height: 100%;
        padding: 20px;
        position: relative;
        display: flex;
        align-items: flex-end;

        .community-info {
            margin-left: 20px;
            flex: 1;

            .community-info-content {
                height: 80px;
                padding-top: 15px;
            }
        }
    }
}

.main-warp {
    margin-top: 10px;
    background-color: white;
    border: 1px solid #DCDFE6;
}

.member-info {
    // background-color: aqua;


}

.list-container {
    flex: 1;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 20px 40px 0px 40px;
    min-height: calc(100vh - 91px);
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;


    /* background-color: aqua; */
}

.community-aside {}

.aside-lable {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-family: "microsoft yahei", simhei, sans-serif;
    color: #333;
}

.sign-in-content {
    position: relative;
    height: 100%;
}

.side-item {
    padding: 20px 20px 20px 20px;
    border-bottom: 1px solid #e4e6eb;
}

::v-deep .el-progress-bar__outer {
    border-radius: 0px !important;
}

::v-deep .el-progress-bar__inner {
    border-radius: 0px !important;
}
</style>